<template>
	<view class="more-container">
		<!-- 顶部装饰 -->
		<view class="header-decoration">
			<view class="wave-bg"></view>
			<view class="floating-elements">
				<view class="element element-1"></view>
				<view class="element element-2"></view>
			</view>
		</view>
		
		<!-- 页面标题 -->
		<view class="page-header">
			<view class="header-content">
				<text class="page-title">更多功能</text>
				<text class="page-subtitle">探索鱼邦的完整功能</text>
			</view>
		</view>
		
		<!-- 功能区域 -->
		<view class="function-sections">
			<!-- 塘头分组 -->
			<view class="function-section">
				<view class="section-header">
					<view class="section-icon">🏞️</view>
					<text class="section-title">塘头管理</text>
					<view class="section-decoration"></view>
				</view>
				<view class="function-grid">
					<view class="function-card" v-for="item in fillHeadList" :key="item.text" @click="fillHeadClick(item)">
						<view class="card-icon-wrapper">
							<image :src="item.icon" class="function-icon" />
							<view class="icon-glow"></view>
						</view>
						<text class="function-text">{{ item.text }}</text>
					</view>
				</view>
			</view>
			
			<!-- 加工厂分组 -->
			<view class="function-section">
				<view class="section-header">
					<view class="section-icon">🏭</view>
					<text class="section-title">加工厂管理</text>
					<view class="section-decoration"></view>
				</view>
				<view class="function-grid">
					<view class="function-card" v-for="item in factoryList" :key="item.text" @click="factoryClick(item)">
						<view class="card-icon-wrapper">
							<image :src="item.icon" class="function-icon" />
							<view class="icon-glow"></view>
						</view>
						<text class="function-text">{{ item.text }}</text>
					</view>
				</view>
			</view>
			
			<!-- 报销单管理分组 -->
			<view class="function-section">
				<view class="section-header">
					<view class="section-icon">📋</view>
					<text class="section-title">报销单管理</text>
					<view class="section-decoration"></view>
				</view>
				<view class="function-grid">
					<view class="function-card" v-for="item in reimburseList" :key="item.text" @click="reimburseClick(item)">
						<view class="card-icon-wrapper">
							<image :src="item.icon" class="function-icon" />
							<view class="icon-glow"></view>
						</view>
						<text class="function-text">{{ item.text }}</text>
					</view>
				</view>
			</view>
			
			<!-- 市场分组 -->
			<view class="function-section">
				<view class="section-header">
					<view class="section-icon">🏪</view>
					<text class="section-title">市场管理</text>
					<view class="section-decoration"></view>
				</view>
				<view class="function-grid">
					<view class="function-card" v-for="item in marketList" :key="item.text" @click="marketClick(item)">
						<view class="card-icon-wrapper">
							<image :src="item.icon" class="function-icon" />
							<view class="icon-glow"></view>
						</view>
						<text class="function-text">{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ErrorHandler from '../../utils/error-handler.js'
	export default {
		data() {
			return {
				fillHeadList: [{
						icon: '/static/gongChang.png',
						text: '单据登记'
					},
					{
						icon: '/static/jihuarenwu.png',
						text: '历史登记'
					},
					{
						icon: '/static/dakuanjilu.png',
						text: '打款记录'
					},
					{
						icon: '/static/tangtoukaizhi.png',
						text: '塘头开支'
					},
					{
						icon: '/static/chefei.png',
						text: '车费'
					}
				],
				factoryList: [{
						icon: '/static/gongChang.png',
						text: '单据登记'
					},
					{
						icon: '/static/jihuarenwu.png',
						text: '历史登记'
					}
				],
				reimburseList: [{
						icon: '/static/reimburse.png',
						text: '报销登记'
					},
					{
						icon: '/static/jihuarenwu.png',
						text: '历史记录'
					}
				],
				marketList: [{
						icon: '/static/icon_fish_02.png',
						text: '死鱼'
					},
					{
						icon: '/static/icon_fish_03.png',
						text: '杂鱼'
					},
					{
						icon: '/static/icon_fish_01.png',
						text: '客仔'
					}
				]
			}
		},
		methods: {
			fillHeadClick(item) {
				console.log(JSON.stringify(item))
				switch (item.text) {
					case "单据登记":
						uni.navigateTo({
							url: '/pages/home/botou/index'
						});
						break;
					case "历史登记":
						uni.switchTab({
							url: '/pages/record/index?item=1'
						})
						break;
					case "打款记录":

					case "塘头开支":

					case "车费":
						ErrorHandler.showSuccess('功能待开发!');
						break;
				}
			},
			factoryClick(item) {
				console.log(JSON.stringify(item))
				switch (item.text) {
					case "单据登记":
						uni.navigateTo({
							url: '/pages/home/gongchang/index'
						});
						break;
					case "历史登记":
						uni.switchTab({
							url: '/pages/record/index?item=1'
						})
						break;
				}
			},
			reimburseClick(item) {
				console.log(JSON.stringify(item))
				switch (item.text) {
					case "报销登记":
						uni.navigateTo({
							url: '/pages/home/skin-damage'
						});
						break;
					case "历史记录":
						uni.switchTab({
							url: '/pages/record/index?tabType=consume'
						});
						break;
				}
			},
			marketClick(item){
				console.log(JSON.stringify(item))
				ErrorHandler.showSuccess('功能待开发!');
			}


		}
	}
</script>

<style scoped lang="scss">
	.more-container {
		background: $bg-secondary;
		min-height: 100vh;
		position: relative;
	}

	/* 顶部装饰 */
	.header-decoration {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 200rpx;
		z-index: 1;
		overflow: hidden;
	}

	.wave-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, $accent 0%, $primary 100%);
		border-radius: 0 0 30% 30%;
		transform: scale(1.1);
	}

	.floating-elements {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.element {
		position: absolute;
		background: rgba(255,255,255,0.1);
		border-radius: 50%;
		animation: element-float 6s ease-in-out infinite;
	}

	.element-1 {
		width: 40rpx;
		height: 40rpx;
		top: 30%;
		left: 20%;
		animation-delay: 0s;
	}

	.element-2 {
		width: 60rpx;
		height: 60rpx;
		top: 60%;
		right: 25%;
		animation-delay: 3s;
	}

	@keyframes element-float {
		0%, 100% { transform: translateY(0px) scale(1); opacity: 0.6; }
		50% { transform: translateY(-20rpx) scale(1.1); opacity: 1; }
	}

	/* 页面标题 */
	.page-header {
		position: relative;
		z-index: 2;
		padding: 40rpx 40rpx 20rpx 40rpx;
		background: transparent;
	}

	.header-content {
		text-align: center;
	}

	.page-title {
		display: block;
		font-size: 36rpx;
		font-weight: 700;
		color: $text-white;
		margin-bottom: 8rpx;
		text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
	}

	.page-subtitle {
		display: block;
		font-size: 24rpx;
		color: rgba(255,255,255,0.8);
		font-weight: 400;
	}

	/* 功能区域 */
	.function-sections {
		position: relative;
		z-index: 2;
		padding: 0 30rpx;
	}

	.function-section {
		background: $bg-primary;
		border-radius: $radius-lg;
		margin-bottom: 24rpx;
		box-shadow: $shadow-md;
		border: 1rpx solid $border-light;
		overflow: hidden;
	}

	.section-header {
		background: $bg-secondary;
		padding: 20rpx 24rpx;
		display: flex;
		align-items: center;
		gap: 12rpx;
		border-bottom: 1rpx solid $border-light;
	}

	.section-icon {
		font-size: 28rpx;
	}

	.section-title {
		font-size: $font-lg;
		font-weight: 600;
		color: $text-primary;
		flex: 1;
	}

	.section-decoration {
		width: 40rpx;
		height: 4rpx;
		background: linear-gradient(90deg, $primary 0%, $secondary 100%);
		border-radius: 2rpx;
	}

	.function-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding: 20rpx;
		gap: 20rpx;
	}

	.function-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24rpx 16rpx;
		border-radius: $radius-md;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		background: $bg-primary;
		border: 1rpx solid $border-light;
		min-height: 120rpx;
		justify-content: center;
	}
	
	/* 响应式设计 - 小屏幕 */
	@media screen and (max-width: 750rpx) {
		.function-grid {
			grid-template-columns: repeat(2, 1fr);
		}
		
		.function-card {
			padding: 20rpx 12rpx;
			min-height: 100rpx;
		}
	}
	
	/* 响应式设计 - 超小屏幕 */
	@media screen and (max-width: 600rpx) {
		.function-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: 16rpx;
		}
		
		.function-card {
			padding: 16rpx 8rpx;
			min-height: 90rpx;
		}
		
		.function-icon {
			width: 50rpx;
			height: 50rpx;
		}
		
		.function-text {
			font-size: 22rpx;
		}
	}

	.function-card:hover {
		background: $bg-secondary;
		transform: translateY(-4rpx);
		box-shadow: $shadow-lg;
		border-color: $primary;
	}

	.card-icon-wrapper {
		position: relative;
		margin-bottom: 12rpx;
	}

	.function-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: $radius-md;
		transition: all 0.3s ease;
	}

	.icon-glow {
		position: absolute;
		top: -4rpx;
		left: -4rpx;
		right: -4rpx;
		bottom: -4rpx;
		background: linear-gradient(135deg, $primary 0%, $secondary 100%);
		border-radius: $radius-md;
		opacity: 0;
		transition: all 0.3s ease;
		z-index: -1;
	}

	.function-card:hover .icon-glow {
		opacity: 0.2;
		animation: icon-glow 2s ease-in-out infinite;
	}

	@keyframes icon-glow {
		0%, 100% { transform: scale(1); opacity: 0.2; }
		50% { transform: scale(1.1); opacity: 0.3; }
	}

	.function-text {
		font-size: $font-sm;
		font-weight: 500;
		color: $text-primary;
		text-align: center;
		line-height: 1.2;
	}

</style>